<template>
  <div class="container max-w-6xl p-4 my-2 bg-white bg-opacity-50 backdrop-blur-md rounded-lg">
    <div class="flex">
      <div class="py-4">
        <img :src="album?.picture" alt="专辑封面" class="rounded-lg" width="256" height="256" />
      </div>
      <div class="flex flex-col p-4">
        <h3 class="text-2xl font-bold mb-2">{{ album?.name }}</h3>
        <span class="text-lg">{{ album?.created }}发布</span>
        <span class="text-lg">共{{ album?.worksList?.length || 0 }}件作品</span>
        <router-link
          v-if="store.state.designer?.fdid == album?.fdid"
          :to="`/designer/album/${album?.waid}/createworks`"
          class="text-indigo-600"
        >发布作品</router-link>
      </div>
    </div>
    <div v-if="album?.worksList" class="flex"></div>
    <DataTable
      v-if="album?.worksList"
      :value="album?.worksList"
      :resizableColumns="true"
      columnResizeMode="fit"
      showGridlines
      responsiveLayout="scroll"
      class="p-datatable-sm"
    >
      <Column header="简介">
        <template #body="props">
          <div v-html="props.data.description"></div>
        </template>
      </Column>
      <Column field="created" header="创建日期"></Column>
      <Column header="查看">
        <template #body="props">
          <a class="text-indigo-500" :href="'/designer/works/' + props.data.dwid" target="_blank">查看</a>
        </template>
      </Column>
    </DataTable>
    <div v-else="!album?.worksList" class="flex justify-center">
      该专辑下没有作品&nbsp;&nbsp;&nbsp;
      <router-link
        v-if="store.state.designer?.fdid == album?.fdid"
        :to="`/designer/album/${album?.waid}/createworks`"
        class="text-indigo-600"
      >发布一个</router-link>
    </div>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'DesignerAlbumInfo'
})
</script>

<script lang="ts" setup>
import { defineComponent, ref } from 'vue'
import { getAlbum } from '@/api/designer/designer'
import { getMyDesignerInfo } from '@/api/designer/designer'
import { useToast } from 'primevue/usetoast'
import { useStore } from 'vuex'

import DataTable from 'primevue/datatable'
import Column from 'primevue/column'

const props = defineProps<{ id: string }>()
let toast = useToast()
const store = useStore()

const album = ref<Album>()

function _getAlbum(id: string) {
  getAlbum(id)
    .then(res => {
      album.value = res.data
    })
    .catch(err => {
      toast.add({
        severity: 'error',
        summary: '获取专辑失败',
        detail: err.data.msg,
        life: 3000,
      })
    })
}

if (!store.state.designer) {
  getMyDesignerInfo()
    .then((res) => {
      store.commit('setDesigner', res.data)
      _getAlbum(props.id)
    })
} else {
  _getAlbum(props.id)
}
</script>